<template>
  <div class="skeleton-chat">
    <template v-for="i in messageCount" :key="i">
      <!-- 左侧消息(奇数) -->
      <div class="skeleton-message skeleton-message-left" v-if="i % 2 === 1">
        <div class="skeleton-avatar pulse"></div>
        <div class="skeleton-content">
          <div class="skeleton-bubble">
            <div class="skeleton-line pulse"></div>
          </div>
        </div>
      </div>

      <!-- 右侧消息(偶数) -->
      <div class="skeleton-message skeleton-message-right" v-else>
        <div class="skeleton-content">
          <div class="skeleton-bubble">
            <div class="skeleton-line pulse"></div>
          </div>
        </div>
        <div class="skeleton-avatar pulse"></div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  // 要显示多少条消息
  messageCount: {
    type: Number,
    default: 6
  }
});
</script>

<style scoped>
.skeleton-chat {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  height: 100%;
}

.skeleton-message {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90%;
}

.skeleton-message-left {
  align-self: flex-start;
}

.skeleton-message-right {
  align-self: flex-end;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #aaaaaa;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
}

.skeleton-bubble {
  width: 100%;
}

.skeleton-line {
  height: 16px;
  border-radius: 8px;
  background-color: #5e5e5e;
}

/* 左右两侧消息长度相似 */
.skeleton-message-left .skeleton-line {
  width: 220px;
}

.skeleton-message-right .skeleton-line {
  width: 220px;
}

/* 脉冲动画效果 */
.pulse {
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.5;
  }
}
</style>
